<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件化的实现和使用</title>
		<script src="../../vue/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<cpn></cpn><!-- 组件的使用 -->
		</div>
		<script type="text/javascript">
			/* 
			组件的使用分成三个步骤：
			1.创建组件构造器  使用Vue.extend()方法
			2.注册组件 使用Vue.component()方法
			3。使用组件 在vue实例的作用范围内使用组件
			 */
			
			//1.创建组件构造器  使用Vue.extend()方法
			const cpnC = Vue.extend({
				template:'<div><h2>我是谢应鹏</h2><p>你好呀</p><p>你好呀</p></div>'
				
			});
			//2.注册组件 使用Vue.component()方法
			Vue.component('my-cpn',cpnC);//两个参数（ 新的标签名 ，组件名）全局组件 可以在多个实例下使用
			//注册局部组件  在实例小下注册就行 app下面
			
			
			
			var app = new Vue({
				el:'#app',
				data:{
					
				},
				components:{//局部组件
					cpn:cpnC //cpn我新的标签名,cpnC为组件
				}
			});
		</script>
	</body>
</html>
